<template>
  <div class="content">
    <Resize>
      <template v-slot:left>
        <div class="content_l content_l2">
          <div class="left-btn">
            <vxe-toolbar v-if="false">
              <template #buttons>
                <el-button
                  type="cyan"
                  size="mini"
                  plain
                  @click="$refs.xTree.setAllTreeExpand(true)"
                  >全部展开</el-button
                >
                <el-button
                  type="cyan"
                  size="mini"
                  plain
                  @click="$refs.xTree.clearTreeExpand()"
                  >全部关闭</el-button
                >
                <el-button
                  type="cyan"
                  size="mini"
                  plain
                  @click="getSiteList"
                  v-if="siteRow"
                  >返回站点</el-button
                >
                <!-- <vxe-button @click="getSiteList">返回站点</vxe-button> -->
              </template>
            </vxe-toolbar>

            <vxe-toolbar style="height: 40px; width: 100%">
              <template #buttons>
                <vxe-radio-button
                  v-model="expend"
                  :label="true"
                  v-if="false"
                  :content="expend ? '全部关闭' : '全部展开'"
                  :strict="false"
                  size="mini"
                  :disabled="!isShowChannel"
                ></vxe-radio-button>
                <vxe-button
                  size="mini"
                  @click="getSiteList"
                  :disabled="!isShowChannel"
                  >返回站点</vxe-button
                >
                <!-- <vxe-button @click="getSiteList">返回站点</vxe-button> -->
              </template>
            </vxe-toolbar>
            <vxe-toolbar style="height: 40px; width: 100%" v-if="isShowChannel">
              <template #buttons>
                <vxe-input
                  v-model="filterName"
                  type="search"
                  clearable
                  size="small"
                  placeholder="栏目名称、栏目Id"
                  @input="handleChannelQuery()"
                  style="display: block; width: 90%; margin: 0 auto"
                ></vxe-input>
              </template>
            </vxe-toolbar>
          </div>
          <!-- <el-scrollbar
            class="left-scroll-container"
            wrap-class="left-scrollbar-wrapper"
          > -->
          <vxe-table
            empty-text="没有更多数据了！"
            :loading="leftTableLoading"
            :loading-config="{ icon: 'el-icon-loading' }"
            highlight-current-row
            highlight-hover-row
            row-key
            :show-header="false"
            show-overflow
            ref="xTree"
            border="inner"
            :data="siteList"
            :tree-config="{
              children: 'children',
              transform: false,
              parentKey: 'parentId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            class="left-table"
            :tooltip-config="{
              showAll: false,
              enterable: true,
              contentMethod: showTooltipMethod,
            }"
            @cell-click="clickListRow"
          >
            <vxe-column tree-node show-overflow>
              <template #default="{ row, $rowIndex }">
                <span class="aaa" style="width: 100%">
                  <span
                    v-if="
                      (row.channelId || row.siteId || row.net) ==
                        currentRowId && !row.root
                    "
                    class="activeRow"
                  >
                    <svg-icon icon-class="right" style="color: #009a94" />
                  </span>
                  <!-- 电脑 -->
                  <img
                    src="../../../assets/icons/png/Display Check.png"
                    alt=""
                    style="vertical-align: text-bottom"
                    v-if="row.root == '000'"
                  />
                  <!-- 地球 -->
                  <img
                    src="../../../assets/icons/png/globe.gif"
                    alt=""
                    style="vertical-align: bottom"
                    v-if="!row.channelId && row.root != '000'"
                  />

                  <!-- 文件夹 -->
                  <!-- <i class="tree-node-icon fa" :class="$refs.xTree.isTreeExpandByRow(row) ? 'el-icon-folder-opened' : 'el-icon-folder'" v-if="siteRow&&!row.root"></i> -->

                  <img
                    src="../../../assets/icons/png/folderopen.gif"
                    alt=""
                    style="vertical-align: text-bottom"
                    @click.stop="openMenu(row, $event)"
                    v-if="
                      siteRow &&
                      row.channelId &&
                      $refs.xTree.isTreeExpandByRow(row)
                    "
                  />

                  <img
                    src="../../../assets/icons/png/folder.gif"
                    alt=""
                    style="vertical-align: text-bottom"
                    @click.stop="openMenu(row, $event)"
                    v-if="
                      siteRow &&
                      row.channelId &&
                      !$refs.xTree.isTreeExpandByRow(row)
                    "
                  />

                  &nbsp; &nbsp; &nbsp; &nbsp;
                  <!-- 箭头 -->
                  <img
                    src="../../../assets/icons/png/contextMenu.gif"
                    alt=""
                    @click.stop="openMenu(row, $event)"
                  />

                  <!-- <el-tooltip class="item" effect="dark" placement="top">
                <span slot="content">
                  {{row.channelId?`栏目ID:${row.channelId}`:`站点ID:${row.siteId}`}}
                </span>

              </el-tooltip> -->
                  <span
                    :class="
                      $rowIndex == 0 && row.channelId
                        ? 'firstChannelRow'
                        : $rowIndex == 0 && !row.channelId && row.root != '000'
                        ? 'firstSiteRow'
                        : ''
                    "
                    style="cursor: pointer; fontsize: 12px; color: #000"
                  >
                    {{ row.name }}
                    <!-- <span class="channelId" v-if="(siteRow&&(row.channelId==leftRowCache||row.siteId==leftRowCache))||(!siteRow&&row.siteId==leftRowCache)">{{row.channelId||row.siteId}}
                </span> -->
                    <span class="channelId"
                      >{{ row.channelId || row.siteId }}
                    </span>
                  </span>
                </span>
              </template>
            </vxe-column>
          </vxe-table>
          <!-- </el-scrollbar> -->
        </div>
      </template>

      <template v-slot:right>
        <div class="content_r">
          <Null v-show="a == 0"></Null>
          <Article
            v-if="a == 1"
            ref="articleRef"
            v-bind:columnRow.sync="columnRow"
            v-bind.sync="columnRow"
            :siteRow="siteRow"
            :newRow="netRow"
            :siteList="siteList"
            @haldleClickSite="haldleClickSite"
          ></Article>
          <Column
            v-if="a == 2"
            :columnRow="columnRow"
            :siteRow="siteRow"
            :headline="columnType"
            :newRow="netRow"
            @handleChangeRight="handleChangeRight"
          ></Column>
          <Site
            v-if="a == 4"
            :headline="columnType"
            :columnRow="columnRow"
            :siteRow="siteRow"
            :newRow="netRow"
            @handleChangeRight="handleChangeRight"
          ></Site>
        </div>
      </template>
    </Resize>
    <div class="progress-box">
      <div class="progress-wrap" v-if="showProgress">
        <div class="title">
          发布任务正在进行中...
          <el-badge :value="publicTaskIds.length" :max="10" class="item">
          </el-badge>
          <span
            class="popClose"
            title="关闭"
            style=""
            @click="
              showProgress = false;
              publicTaskIdIndex = -1;
            "
            >关闭</span
          >
        </div>
        <ul class="progress-msg">
          <li class="popIntro">开始时间： {{ progressDetail.startTime }}</li>
          <li
            class="popIntro"
            :title="progressDetail.endTime"
            v-if="progressDetail.endTime"
          >
            结束时间： {{ progressDetail.endTime }}
          </li>
          <li class="popIntro" :title="progressDetail.msg">
            任务类型： {{ progressDetail.msg }}
          </li>
          <li class="popIntro" :title="progressDetail.taskName">
            任务信息： {{ progressDetail.taskName }}
          </li>
        </ul>
        <div class="arrow" v-show="publicTaskIds.length > 1">
          <el-button
            type="text"
            :disabled="publicTaskIdIndex == 0"
            @click="publicTaskIdIndex--"
            >上一个</el-button
          >
          <el-button
            type="text"
            :disabled="publicTaskIdIndex == publicTaskIds.length - 1"
            @click="publicTaskIdIndex++"
            >下一个</el-button
          >
        </div>
      </div>
      <div
        class="progress-wrap-show"
        v-else-if="!showProgress && publicTaskIds.length > 0"
      >
        <span
          class="showPop"
          @click="
            showProgress = true;
            publicTaskIdIndex = 0;
          "
        >
          查看发布进度
          <el-badge :value="publicTaskIds.length" :max="10" class="item">
          </el-badge>
        </span>
        <i
          class="el-icon-arrow-up"
          style="float: right; cursor: pointer"
          @click="
            showProgress = true;
            publicTaskIdIndex = 0;
          "
        ></i>
      </div>
    </div>
    <!-- wycms主站 -->
    <ul
      v-show="addNet"
      :style="{ left: left + 'px', top: top + 'px' }"
      class="contextmenu"
    >
      <li @click="haldleAddNet" v-hasPermi="['system:site:add']">新建网站</li>
      <el-upload
        class="upload-demo"
        action="#"
        :before-upload="beforeUpload"
        multiple
        v-hasPermi="['system:site:export']"
      >
        <li @click="handleInportSite" v-hasPermi="['system:site:export']">
          网站导入
        </li>
      </el-upload>
    </ul>
    <!-- 站点列表 -->
    <ul
      v-show="seeNet"
      :style="{ left: left + 'px', top: top + 'px' }"
      class="contextmenu"
    >
      <li @click="haldleSeeNet">网站浏览</li>
      <li @click="handleNewAttribute" v-hasPermi="['system:site:edit']">
        网站属性
      </li>
      <li @click="handleExportSite" v-hasPermi="['system:site:export']">
        网站导出
      </li>
    </ul>

    <!-- 站点菜单 -->
    <ul
      v-show="netVisible"
      :style="{ left: left + 'px', top: top + 'px' }"
      class="contextmenu"
    >
      <li @click="handleNewAttribute" v-hasPermi="['system:site:edit']">
        网站属性
      </li>
      <li @click="handleColumnAdd" v-hasPermi="['system:channel:add']">
        新建栏目
      </li>
      <li @click="handlePublic('net')" v-hasPermi="['system:publicize:site']">
        网站发布
      </li>
      <li @click="haldleSeeNet">网站浏览</li>
      <el-upload
        class="upload-demo"
        action="#"
        :before-upload="beforeUpload"
        multiple
        v-hasPermi="['system:site:export']"
      >
        <li @click="handleInportSite" v-hasPermi="['system:site:export']">
          网站导入
        </li>
      </el-upload>
    </ul>

    <!-- 栏目菜单 -->
    <ul v-show="siteVisible" :style="ulStyle" class="contextmenu">
      <li @click="handleColumnAttribute" v-hasPermi="['system:channel:query']">
        栏目属性
      </li>
      <li @click="handleColumnAdd" v-hasPermi="['system:channel:add']">
        新建栏目
      </li>
      <li
        @click="handlePublic('column')"
        v-hasPermi="['system:publicize:channel']"
      >
        栏目发布
      </li>
      <li @click="haldleSeeColumn">栏目浏览</li>
      <li @click="handleExportColumn" v-hasPermi="['system:channel:export']">
        栏目导出
      </li>
      <el-upload
        class="upload-demo"
        action="#"
        :before-upload="beforeUpload"
        multiple
        v-hasPermi="['system:site:export']"
      >
        <li @click="handleInportSite" v-hasPermi="['system:site:export']">
          网站导入
        </li>
      </el-upload>
    </ul>

    <!-- 栏目发布   站点发布 -->
    <el-dialog
      v-dialogDrag
      :title="publicDialog.title"
      :visible.sync="publicDialog.open"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <strong style="fontsize: 24px; color: red; margin: 0 0 10px 0"
        >请选择您要进行的操作:</strong
      >
      <template v-if="publicDialog.type == 'column'">
        <div class="grid-content" style="padding-left: 10px">
          <el-row class="grid-content">
            <el-radio v-model="radio1" :label="0" style="width: 100%"
              >只发布本栏目</el-radio
            >
          </el-row>
          <el-row class="grid-content">
            <el-radio v-model="radio1" :label="1" style="width: 100%"
              >发布本栏目及其子栏目(后台)</el-radio
            >
          </el-row>
          <el-row class="grid-content">
            <el-radio v-model="radio1" :label="2" style="width: 100%"
              >发布本栏目及子栏目(含最近
              <el-input-number
                class="radio_input"
                v-model.number="dayNum1"
                :min="1"
                :max="maxDayNum"
                style="width: 150px"
              ></el-input-number>
              天的已发布文章)(后台)
            </el-radio>
          </el-row>
        </div>
      </template>
      <template v-else>
        <div class="grid-content" style="padding-left: 10px">
          <el-row class="grid-content">
            <el-radio v-model="radio1" :label="0" style="width: 100%"
              >只发布站点首页</el-radio
            >
          </el-row>
          <el-row class="grid-content">
            <el-radio v-model="radio1" :label="1" style="width: 100%"
              >发布站点及其所有栏目(后台)</el-radio
            >
          </el-row>
          <el-row class="grid-content">
            <el-radio v-model="radio1" :label="2" style="width: 100%"
              >只发布站点下的已发布文章(最近
              <el-input-number
                class="radio_input"
                v-model="dayNum2"
                :min="1"
                :max="maxDayNum"
                style="width: 150px"
              ></el-input-number>
              天)(后台)
            </el-radio>
          </el-row>
          <el-row class="grid-content">
            <el-radio v-model="radio1" :label="3" style="width: 100%"
              >发布站点及其所有栏目(含最近
              <el-input-number
                class="radio_input"
                v-model="dayNum3"
                :min="1"
                :max="maxDayNum"
                style="width: 150px"
              ></el-input-number>
              天的所有已发布文章)(后台)
            </el-radio>
          </el-row>
        </div>
      </template>

      <template v-if="loading">
        <span style="color: rgb(255, 0, 0)">
          发布中,请稍后。如果您不需要确认发布结果，可以点击“隐藏窗口”按钮使发布转入后台执行，您可以并行的处理其他事务。
        </span>
        <i class="el-icon-loading"></i>
      </template>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">隐藏窗口</el-button>
        <el-button
          slot="reference"
          type="primary"
          @click.enter="submitForm"
          :disabled="loading"
          >确定发布</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Article from "./article/article";
import Column from "./column/column";
import Site from "./site/site";
import Null from "./components/null";
import { debounce, deepClone, filterTree } from "@/utils";
import _ from "lodash";

import { editsite, addSite, listSite, publicSite } from "@/api/content/net";
import {
  getChannelListForTree,
  publicChannel,
  makeSiteViewUrl,
  makeChannelViewUrl,
  publicize,
  exportChannel,
  exportSite,
} from "@/api/content/clounm";

export default {
  name: "ColumnArticle",
  inject: ["tour"],
  data() {
    return {
      //左侧栏目筛选
      filterName: "",
      //全部展开 全部关闭
      expend: false,

      //新建网站  ul
      addNet: false,
      //网站浏览   ul
      seeNet: false,
      //4个 网站属性  ul 站点下面的
      netVisible: false,
      //4个 栏目属性  ul 栏目下面的
      siteVisible: false,
      // 栏目搜索框的显示  同时控制返回站点按钮
      isShowChannel: false,
      //发布对话框  title open
      publicDialog: {
        title: null,
        open: false,
        type: null,
      },
      //发布loading
      loading: false,
      leftTableLoading: false,
      //发布对话框   单选按钮
      radio1: 0,
      maxDayNum: 30,
      dayNum1: 30,
      dayNum2: 30,
      dayNum3: 30,
      //右侧显示  不用路由跳转。直接全写出来  v-if
      a: 0,
      //左侧站点列表
      siteList: [],
      // 存放获取到的左侧列表
      siteListCache: [],

      leftListTree: [], // 左侧的树结构。children:[]
      //ul 的绝对定位   位置
      top: 0,
      left: 0,
      ulStyle: {},
      //当前活动站点
      activeSiteId: undefined,
      //当前栏目行
      columnRow: undefined,
      //当前站点行
      siteRow: undefined,
      //主站行
      netRow: undefined,

      //栏目属性   新增or编辑
      columnType: "",

      showProgress: false,
      progressDetail: {},
      publicTimer: [], //发布任务计时器   不用了。直接动态变量
      publicTaskIdIndex: -1,
    };
  },

  components: { Column, Article, Null, Site },

  computed: {
    currentRowId() {
      return this.columnRow?.channelId || this.siteRow?.siteId;
    },
    publicTaskIds() {
      return this.$store.getters.publicTaskIds;
    },
  },
  created() {
    this.getSiteList();
  },
  async mounted() {
    this.initPublic();

    await this.getConfigKey("pub_article_num").then((response) => {
      this.maxDayNum = Number(response.msg);
      this.dayNum1 = Number(response.msg);
      this.dayNum2 = Number(response.msg);
      this.dayNum3 = Number(response.msg);
    });
    // let t1 = sessionStorage.getItem("publicSite");
    // let t2 = sessionStorage.getItem("publicChannel");
    // t1 && t1 != "undefined" && this.handlePublicProcess(t1,  );
    // t2 && t2 != "undefined" && this.handlePublicProcess(t2,  );
  },
  watch: {
    netVisible(value) {
      console.log("🚀 ~ file: index.vue:267 ~ netVisible ~ value", value);
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
    siteVisible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
    addNet(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
    seeNet(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
    expend(value) {
      if (value) {
        this.$refs.xTree.setAllTreeExpand(true);
      } else {
        this.$refs.xTree.clearTreeExpand();
        this.$nextTick(() => {
          this.$refs.xTree.setTreeExpand(this.siteList[0], true);
        });
      }
    },

    publicTaskIdIndex(index) {
      console.log("index: ", index);
      let taskId = this.publicTaskIds[index];
      taskId && this.handlePublicProcess(taskId);
    },
  },
  methods: {
    //获取站点列表
    getSiteList() {
      this.filterName = "";
      this.isShowChannel = false;
      this.expend = false;
      this.a = 0;
      this.leftTableLoading = true;
      this.$store.dispatch("column/setColumnRow", null);

      listSite()
        .then((res) => {
          this.siteList = [
            {
              name: "WYCMS主站",
              root: "000",
              children: res.data,
            },
          ];
          console.log("this.siteList: ", this.siteList);
        })

        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.netRow = undefined;
            this.siteRow = undefined;
            this.columnRow = undefined;
            this.$refs.xTree.setTreeExpand(this.siteList[0], true);
          });
          this.leftTableLoading = false;
        });
    },

    //获取栏目列表
    clickListRow({ row, triggerTreeNode }) {
      // 点击的是展开 收缩
      if (triggerTreeNode) return;

      console.log("🚀 ~ file: index.vue ~ line 322 ~ clickListRow ~ row", row);
      this.$refs.xTree.setCurrentRow(row);

      if (row.siteId && row.channelId) {
        //点击栏目行   获取文章列表
        // this.$refs.xTree.updateData(this.siteList).then(() => {
        //   //展开第一个节点
        //   this.$nextTick(() => {
        //     this.$refs.xTree.setTreeExpand(this.siteList[0], true);
        //   });
        // });
        this.columnRow = row;
        this.$store.dispatch("column/setColumnRow", row);
        this.haldleClickColumn();
      } else if (row.root == "000") {
        // 点击主站行
        this.a = 0;

        this.netRow = row;
        this.siteRow = undefined;
        this.columnRow = undefined;

        this.$store.dispatch("column/setNetRow", row);
        this.a = 0;
      } else if (row.siteId && row.root == "111") {
        // 点击内层 站点行
        this.a = 0;
      } else {
        //点击外层  站点行    获取栏目列表
        this.siteRow = row;
        this.siteRow.root = "111";
        this.columnRow = undefined;
        this.$store.dispatch("column/setSiteRow", row);
        this.haldleClickSite();
      }
    },

    //点击栏目列表
    haldleClickColumn() {
      this.a = 1;
      this.$nextTick(() => {
        console.log("this.$refs.articleRef: ", this.$refs.articleRef);
        this.$refs.articleRef.resetQuery();
        this.tour.$refs.tour.$refs.vtour.nextStep();
      });
    },
    haldleClickColumn_bak() {
      this.a = null;
      //  this.$refs.xTree.loadData(this.siteList);
      setTimeout(() => {
        this.$nextTick(() => {
          this.a = 1;
          // this.$refs.xTree.setAllTreeExpand(true);
          // this.columnRow && this.$refs.xTree.setCurrentRow(this.columnRow);
        });
      }, 0);
    },
    //点击站点行  获取栏目列表
    haldleClickSite() {
      this.leftTableLoading = true;
      this.siteList[0].children = [];
      getChannelListForTree({ siteId: this.siteRow.siteId })
        .then((res) => {
          this.leftListTree = this.handleTree(res.data, "channelId").filter(
            (item) => item.parentId == this.siteRow.siteId
          );

          let row = deepClone(this.siteRow);
          let row2 = deepClone(this.siteRow);

          row.children = this.leftListTree;
          row2.children = this.leftListTree;

          this.siteList = [row];
          console.log("this.siteList: ", this.siteList);
          this.siteListCache = [row2];
          console.log("this.siteListCache: ", this.siteListCache);

          this.leftTableLoading = false;

          this.isShowChannel = true;
          // return;
          // let aa = res.data.filter((item) => {
          //   return this.filterName
          //     ? item.name.indexOf(this.filterName.trim().toLowerCase()) > -1
          //     : true;
          // });
          // this.siteRow.children = this.handleTree(aa, "channelId").filter(
          //   (item) => item.parentId == this.siteRow.siteId
          // );
          // this.siteRow.root = "111";
          // this.siteList = [this.siteRow];
        })
        .then(() => {
          //展开第一个节点
          // this.columnRow = undefined;
          this.$store.dispatch("column/setColumnRow", null);
          //展开第一个节点
          this.$refs.xTree.setTreeExpand(this.siteList[0], true);
          //展开所有节点
          // this.$refs.xTree.setAllTreeExpand(true);
          this.columnRow && this.$refs.xTree.setCurrentRow(this.columnRow);
          this.$refs.xTree.setCurrentRow(this.siteList[0].children[0]);
          console.log("this.siteList[0][0]: ", this.siteList[0].children[0]);
          this.$nextTick(() => {
            this.tour.$refs.tour.$refs.vtour.nextStep();
          });
        })
        .catch((e) => {
          this.$alert("栏目列表获取失败，请联系管理员", "提示", {
            confirmButtonText: "确定",
          });
        });
    },

    handleChannelQuery: debounce(function () {
      this.channelQuery();
    }, 600),

    channelQuery() {
      new Promise((resolve, reject) => {
        console.log("this.siteListCache: ", this.siteListCache);
        let arr = filterTree(this.siteListCache[0], this.filterName, [
          "channelId",
          "name",
        ]);
        console.log("arr: ", arr);

        this.siteList = [arr];
        if (!arr) {
          this.siteList = [this.siteRow];
          this.siteList[0].children = [];
        }

        this.leftTableLoading = false;

        resolve();
        this.$nextTick(() => {});
      }).then(() => {
        //展开第一个节点
        // this.columnRow = undefined;
        this.$store.dispatch("column/setColumnRow", null);
        //展开第一个节点
        this.siteList[0] &&
          this.$refs.xTree.setTreeExpand(this.siteList[0], true);
        //展开所有节点
        // this.$refs.xTree.setAllTreeExpand(true);
        this.columnRow && this.$refs.xTree.setCurrentRow(this.columnRow);
        this.siteList[0]?.children &&
          this.$refs.xTree.setCurrentRow(this.siteList[0].children[0]);
        this.$nextTick(() => {
          this.tour.$refs.tour.$refs.vtour.nextStep();
        });
      });
    },

    //点击栏目属性
    handleColumnAttribute() {
      this.a = null;
      this.columnType = "edit" + new Date().getTime();
      this.$nextTick(() => {
        this.a = 2;
      });
    },
    //点击网站属性
    handleNewAttribute() {
      this.a = null;
      this.columnType = "edit" + new Date().getTime();
      this.$nextTick(() => {
        this.a = 4;
      });
    },
    //新建栏目
    handleColumnAdd() {
      this.a = null;
      if (this.netVisible) this.columnRow = undefined;
      this.columnType = "add" + new Date().getTime();
      this.$nextTick(() => {
        this.a = 2;
      });
    },

    /**
     *   * 删除完   去null页面
     * @params b==0 删除站点 左侧调站点接口
     * b==1 删除栏目 左侧调 栏目接口
     * @params  a 右侧页面。比较多
     * a  0  null
     * a  1  article
     * a  2  cloumn
     * a  4  site
     */
    handleChangeRight(freshRight = null, freshLeft) {
      // if (this.siteRow?.root == 111) {
      //   freshRight = 0;
      //   freshLeft = 1;
      // }
      if (freshLeft == "site") {
        //获取站点列表
        this.getSiteList();
      } else if (freshLeft == "cloumn") {
        //点击站点行  获取栏目列表
        this.haldleClickSite();
      } else if (freshLeft == null) {
        console.log("不用刷新左侧栏目");
      }

      // if (this.siteList[0].root == "000") {
      //   //主站页面
      //   this.getSiteList();
      // } else if (this.siteList[0].root == "111") {
      //   //站点页面
      //   if (freshLeft == 1) {
      //     this.getSiteList();
      //   } else if (freshLeft == 0) {
      //     this.haldleClickSite();
      //   }
      // }

      this.$nextTick(() => {
        this.a = freshRight;
      });
    },
    //网站浏览
    haldleSeeNet() {
      makeSiteViewUrl({ siteAlias: this.siteRow.alias }).then((res) => {
        let href = res.msg;
        window.open(href, "_blank");
      });
    },
    //栏目浏览
    haldleSeeColumn() {
      makeChannelViewUrl({
        // siteAlias: this.siteRow.alias,
        channelId: this.columnRow.channelId,
      }).then((res) => {
        let href = res.msg;
        window.open(href, "_blank");
      });
    },
    //新建网站
    haldleAddNet() {
      this.a = null;
      this.columnType = "add" + new Date().getTime();
      this.$nextTick(() => {
        this.a = 4;
      });
    },
    handlePublic(type) {
      if (type == "column") {
        this.publicDialog = {
          open: true,
          title: "发布栏目",
          type: "column",
        };
      } else if (type == "net") {
        this.publicDialog = {
          open: true,
          title: "网站栏目",
          type: "net",
        };
      }
    },
    //栏目导出
    handleExportColumn() {
      let flag;
      this.$confirm("是否确认导出所有栏目?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          exportChannel({
            allChild: 1,
            channelId: this.columnRow.channelId,
          }).then((res) => {});
        })
        .catch(() => {
          return;
        });
    },
    //站点导出
    handleExportSite() {
      exportSite({ siteId: this.siteRow.siteId }).then((res) => {});
    },
    //栏目导入
    handleInportSite() {},
    //  栏目导入
    beforeUpload() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let time = Math.floor(Math.random() * (2000 - 800 + 1)) + 800;
      setTimeout(() => {
        loading.close();
        this.msgInfo(`上传的文件不符合格式`);
        return;
      }, time);
    },

    // 发布对话框   确认按钮
    submitForm() {
      let title = "";
      let form;
      let radio = this.radio1;
      if (this.publicDialog.type == "column") {
        form = {
          siteAlias: this.siteRow.alias,
          type: radio,
          dayNum: 0,
          channelId: this.columnRow.channelId,
        };
        if (radio == 0) {
          title = "您确定只是要发布此栏目？";
        } else if (radio == 1) {
          title = "您确定要发布此栏目及其所有子栏目？";
        } else if (radio == 2) {
          title = "您确定要发布此栏目及其所有子栏目及栏目下的文章？";
          form.dayNum = this.dayNum1;
        }
      } else {
        form = {
          siteAlias: this.siteRow.alias,
          type: radio,
          dayNum: 0,
          siteId: this.siteRow.siteId,
        };
        if (radio == 0) {
          title = "您确定只是要发布此站点首页？";
        } else if (radio == 1) {
          title = "您确定要发布此站点及其所有栏目？";
        } else if (radio == 2) {
          title = "您确定要发布此站点的所有文章？";
          form.dayNum = this.dayNum2;
        } else if (radio == 3) {
          title = "您确定要发布此站点及其所有栏目和文章？";
          form.dayNum = this.dayNum3;
        }
      }

      this.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          if (this.publicDialog.type == "column") {
            publicChannel(form).then((res) => {
              this.loading = false;
              this.msgSuccess(res.msg);
              this.cancel();
              if (res?.taskId) {
                this.handlePublicProcess(res.taskId);
                this.$store.dispatch("column/addPublicTaskId", res.taskId);
              }
            });
          } else {
            publicSite(form).then((res) => {
              this.loading = false;
              this.msgSuccess(res.msg);
              this.cancel();
              if (res?.taskId) {
                this.handlePublicProcess(res.taskId);
                this.$store.dispatch("column/addPublicTaskId", res.taskId);
              }
            });
          }
        })
        .catch(() => {
          return;
        });
    },
    // 定时获取栏目发布进度
    handlePublicProcess(taskId) {
      clearInterval(this["timer" + taskId]);
      this["timer" + taskId] = null;
      this.handlePub(taskId);
      this["timer" + taskId] = setInterval(() => {
        this.handlePub(taskId);
      }, 5000);
    },
    handlePub(taskId) {
      publicize({ taskId }).then((res) => {
        if (res.code == 200) {
          if (res.data.status == 0) {
            console.log("正在发布中");
            console.log(
              "taskId == this.publicTaskIds[this.publicTaskIdIndex]: ",
              taskId,
              this.publicTaskIdIndex,
              this.publicTaskIds[this.publicTaskIdIndex]
            );
            if (taskId == this.publicTaskIds[this.publicTaskIdIndex]) {
              this.progressDetail = res.data;
            }
          } else if (res.data.status == 1) {
            console.log("任务发布结束");
            this.$store.dispatch("column/delPublicTaskId", taskId);

            if (this["timer" + taskId]) {
              clearInterval(this["timer" + taskId]);
              this["timer" + taskId] = null;
            }
            console.log(" this.publicTaskIds: ", this.publicTaskIds);
            if (this.publicTaskIds.length > 0) {
              this.publicTaskIdIndex = -1;
              this.publicTaskIdIndex = 0;
            }
            this.$notify({
              title: "温馨提示",
              dangerouslyUseHTMLString: true,
              type: "success",
              duration: 0,
              position: "top-right",
              message: `
                  <div class="popContent" style="">
                    <ul>
                      <li class="popTitle">您提交的发布任务已结束.</li>
                      <li class="popIntro">开始时间：${res.data.startTime}</li>
                      <li class="popIntro">结束时间：${res.data.endTime}</li>
                      <li class="popIntro">任务类型：${res.data.msg}</li>
                      <li class="popIntro">任务信息：${res.data.taskName}</li>
                    </ul>
                  </div>`,
            });
          } else if (res.data.status == 2) {
            console.log("任务不存在");

            this.$store.dispatch("column/delPublicTaskId", taskId);
            this.$notify({
              title: "温馨提示",
              dangerouslyUseHTMLString: true,
              type: "success",
              duration: 0,
              position: "top-right",
              message: `
                  <div class="popContent" style="">
                    <ul>
                      <li class="popTitle">查询的发布任务不存在</li>.</li>
                    </ul>
                  </div>`,
            });
          }
        }
        return;
        if (res.msg == "发布任务不存在或者已结束") {
          clearInterval(this["timer" + taskId]);
          type == "site" && sessionStorage.removeItem("publicSite");
          type == "channel" && sessionStorage.removeItem("publicChannel");

          this["timer" + taskId] = null;
          this.$notify({
            title: "温馨提示",
            dangerouslyUseHTMLString: true,
            type: "success",
            duration: 6000,
            position: "top-right",
            message: `<strong> 您提交的发布任务已结束.</strong>`,
          });
        }
      });
    },

    // 初始化 历史发布
    initPublic() {
      console.log("this.publicTaskIds: ", this.publicTaskIds);
      this.publicTaskIds.forEach((taskId) => {
        console.log("taskId: ", taskId);
        this.handlePub(taskId);
      });
    },
    cancel() {
      this.publicDialog = {
        open: false,
        title: null,
        type: null,
      };
      this.loading = false;
      this.radio1 = 0;
      this.dayNum1 = this.dayNum2 = this.dayNum3 = 30;
    },
    openMenu(row, e) {
      console.log("row, e: ", row, e);

      this.closeMenu();
      //高亮当前行
      this.$refs.xTree.setCurrentRow(row);
      const menuMinWidth = 105;
      const menuMinHeight = 200;
      const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
      console.log(
        "🚀 ~ file: index.vue ~ line 663 ~ openMenu ~ window.screen",
        window.screen
      );
      console.log(
        "🚀 ~ file: index.vue ~ line 641 ~ openMenu ~ this.$el",
        this.$el
      );
      console.dir(this.$el);
      const offsetWidth = this.$el.offsetWidth; // container width
      const offsetHeight = this.$el.offsetHeight;
      const maxLeft = offsetWidth - menuMinWidth; // left boundary
      const maxHeight = offsetHeight - menuMinHeight;
      const left = e.clientX + 15; // 15: margin right
      const top = e.clientY;
      if (left > maxLeft) {
        this.left = maxLeft;
      } else {
        this.left = left;
      }
      if (top > maxHeight) {
        this.top = top - menuMinHeight;
        this.ulStyle = {
          left: left + "px",
          bottom: document.body.clientHeight - top + "px",
        };
      } else {
        this.top = top;
        this.ulStyle = {
          left: left + "px",
          top: top + "px",
        };
      }
      console.log(
        "🚀 ~ file: index.vue ~ line 661 ~ openMenu ~ this.ulStyle",
        this.ulStyle
      );

      // this.top = e.clientY + 15;
      //主站行
      if (row.root == "000") {
        //新建网站
        this.addNet = true;

        this.netRow = row;
        this.siteRow = undefined;
        this.columnRow = undefined;

        this.$store.dispatch("column/setNetRow", row);
      } else if (row.siteId && row.root == "111") {
        //网站属性
        this.netVisible = true;

        this.siteRow = row;
        // this.columnRow = undefined;

        this.$store.dispatch("column/setSiteRow", row);
        // this.a = 0;
      } else if (row.siteId && !row.channelId) {
        //网站浏览
        this.seeNet = true;
        // 主站，站点行
        this.siteRow = row;
        // this.columnRow = undefined;

        this.$store.dispatch("column/setSiteRow", row);
      } else if (row.siteId && row.channelId) {
        //栏目属性
        this.siteVisible = true;
        this.columnRow = row;

        this.$store.dispatch("column/setColumnRow", row);
      }
    },
    closeMenu() {
      this.netVisible = false;
      this.siteVisible = false;
      this.addNet = false;
      this.seeNet = false;
      // this.siteRow = undefined;
    },
    //站点 栏目  id 提示框
    showTooltipMethod({ row, column, cell }) {
      if (
        cell.lastChild.lastChild.lastChild.lastChild.offsetWidth > column.width
      ) {
        if (row.channelId && this.siteRow) {
          // return row.name + "  栏目ID:" + row.channelId;
          return "栏目ID:" + row.channelId;
        } else if (row.siteId && !this.siteRow) {
          // return row.name + "  站点ID:" + row.siteId;
          return "站点ID:" + row.siteId;
        }
      } else {
        return "";
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/assets/styles/variables.scss";
.content {
  width: 100%;
  // height: calc(100vh - 100px);
  // height: calc(100vh - #{$footHeight} - 0px - 50px - 20px);
  // display: flex;
  // flex-direction: row;
  // padding: 0px 10px 10px 0;
  border: 1px solid #ccc;
  position: relative;
  .content_l {
    overflow: auto;
    // min-width: 240px;
    width: 100%;
    height: 100%;
    background: #f4f4f4 !important;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    .left-table {
      flex: 1;

      min-width: 240px;
    }
  }
  .content_l.v-tour__target--highlighted {
    pointer-events: none;
  }

  .content_r {
    overflow: overlay;
    overflow: auto;
    width: 100%;
    // padding: 10px;
    border-left: 1px solid #ccc;
    height: 100%;
    flex: 1;
    background: #f4f4f4;
  }
}
.progress-box {
  position: absolute;
  right: 0;
  bottom: 0;
  border: 1px solid #e0e0e0;
  z-index: 999;
  width: 300px;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 6px, rgba(0, 0, 0, 0.16) 0px 2px 32px;
  .progress-wrap {
    padding: 10px 20px;
    .title {
      line-height: 24px;
      font-size: 14px;
      font-family: "微软雅黑";
      color: #333;
      font-weight: bold;
      text-decoration: none;
      .popClose {
        position: absolute;
        right: 10px;
        top: 10px;
        &:hover {
          color: red;
          cursor: pointer;
        }
      }
    }
    .progress-msg {
      padding-top: 10px;
      text-indent: 2em;
      line-height: 24px;
      font-size: 14px;
      font-family: "微软雅黑";
      color: #000;
      text-decoration: none;

      .popTitle {
        line-height: 24px;
        font-size: 14px;
        font-family: "微软雅黑";
        color: #333;
        font-weight: bold;
        text-decoration: none;
      }
      .popIntro {
        text-indent: 0px;
        color: #666;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
      }
    }
    .arrow {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
  .progress-wrap-show {
    padding: 10px 20px;
    background: #f6f0f3;

    display: flex;
    justify-content: space-between;
    align-items: center;
    .showPop {
      cursor: pointer;

      border-radius: 2px;
      overflow: hidden;
    }
  }
}
.radio_input {
  width: 60px;
}
</style>
